{% extends "base.html" %}
{%load staticfiles%}

{% block css %}
  <link rel="stylesheet" href="{% static 'bower_components/select2/dist/css/select2.min.css' %}">
  <link rel="stylesheet" href="{% static 'dist/css/dataTables.bootstrap.min.css' %}">
{% endblock %}

{% block content %}
<!-- Content Header (Page header) -->
  <section class="content-header">
    <h1>
      用户及权限
      <small>用户列表</small>
    </h1>
    <ol class="breadcrumb">
      <li><a href="#"><i class="fa fa-dashboard"></i> 用户及权限</a></li>
    </ol>
  </section>
  <section class="content">
    <div class="row">
      <div class="callout callout-info">
        建议通过定时任务程序实现企业账户信息往loonflow的同步(直接操作loonflow的数据库,非管理员用户无需登录loonflow,密码随便设置)。管理人员可同步后重置登录密码
      </div>
      <div class="col-md-12">
        <div class="box box-default">
            <button type="button" class="btn btn-success" data-toggle="modal" data-target="#UserModal">
                新增
            </button>
        <table id="user_table" class="table table-striped table-bordered dataTable no-footer" >
          <thead>
            <tr>
                <th>ID</th>
                <th>用户名</th>
                <th>姓名</th>
                <th>邮箱</th>
                <th>电话</th>
                <th>部门</th>
                <th>状态</th>
                <th>超级管理员</th>
                <th>工作流管理员</th>
                <th>创建人</th>
                <th>创建时间</th>
                <th>操作</th>
            </tr>
          </thead>
          <tbody>
    
          </tbody>
        </table>
        
      </div>
    </div>
      <div class="modal fade" id="userRoleModal">
        <div class="modal-dialog" style="width: 980px;">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title" id="userRoleTitle">用户角色</h4>
            </div>
            <div class="modal-body">
              <table id="user_role_table" class="table table-striped table-bordered dataTable no-footer" style="width:100%">
                <thead>
                  <tr>
                    <th>ID</th>
                    <th>角色名</th>
                  </tr>
                </thead>
                <tbody>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
      <div class="modal fade" id="UserModal">
        <div class="modal-dialog" style="width: 980px;">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title">用户</h4>
            </div>
            <div class="modal-body">
              <form class="form-horizontal" id='user_form'>
                <div class="box-body">
                  <div class="form-group">
                    <label for="userName" class="col-sm-3 control-label" >用户名<span style="color:red">*</span></label>
                    <div class="col-sm-9">
                      <input type="text" class="form-control" id="userName" placeholder="请输入用户名" required>
                    </div>
                  </div>
                  <div class="form-group">
                      <label for="userAlias" class="col-sm-3 control-label">姓名<span style="color:red">*</span></label>
                      <div class="col-sm-9">
                        <input type="text" class="form-control" id="userAlias" placeholder="请输入真实姓名/花名">
                      </div>
                  </div>
                  <div class="form-group" id="passwordGroup">
                      <label for="userPassword" class="col-sm-3 control-label">密码</label>
                      <div class="col-sm-9">
                        <input type="text" class="form-control" id="userPassword" placeholder="仅超级管理员及工作流管理员才需要登录管理后台" disabled>
                      </div>
                  </div>
                  <div class="form-group">
                      <label for="userEmail" class="col-sm-3 control-label">邮箱<span style="color:red">*</span></label>
                      <div class="col-sm-9">
                        <input type="email" class="form-control" id="userEmail" placeholder="请输入邮箱" required>
                      </div>
                  </div>
                  <div class="form-group">
                      <label for="userPhone" class="col-sm-3 control-label">电话</label>
                      <div class="col-sm-9">
                        <input type="phone" class="form-control" id="userPhone" placeholder="请输入电话">
                      </div>
                  </div>
                  <div class="form-group">
                      <label for="userDeptId" class="col-sm-3 control-label">部门<span style="color:red">*</span></label>
                      <div class="col-sm-9">
                        <select class="form-control select2" id="userDeptId" data-placeholder="请输入部门名称查询"
                                style="width: 100%;" required>
                        </select>
                      </div>
                  </div>
                  <input type="text" class="form-control" id="userId" style="display:none">

                  <div class="form-group">
                  <div class="checkbox">
                    <label for="isActive" class="col-sm-3 control-label">在职</label>
                      <div class="col-sm-9">
                        <input type="checkbox" id='isActive' checked>
                  </div>
                  </div>
                  <div class="form-group">
                  <div class="checkbox">
                    <label for="viewPermissionCheck" class="col-sm-3 control-label">超级管理员</label>
                      <div class="col-sm-9">
                        <input type="checkbox" id='isAdmin' onchange="adminChange();">
                        <p class="help-block">开启后拥有loonflow管理后台所有功能的权限, 包括工作流管理员的所有权限</p>
                      </div>
                  </div>
                  </div>
                  <div class="form-group">
                  <div class="checkbox">
                      <label for="viewPermissionCheck" class="col-sm-3 control-label">工作流管理员</label>
                        <div class="col-sm-9">
                          <input type="checkbox" id='isWorkflowAdmin' onchange="adminChange();">
                          <p class="help-block">开启后允许登录loonflow管理后台拥有工作流配置及对应有权限工作流的相关管理功能</p>
                        </div>
                  </div>
                  </div>
                  <div class="callout callout-info">
                    建议通过定时任务程序实现企业账户信息往loonflow的同步(直接操作loonflow的数据库,非管理员用户无需登录loonflow,密码随便设置)。
                  </div>
                  <!-- /.box-body -->
                  <div class="box-footer">
                    <!-- <button type="submit" class="btn btn-info pull-right">确定</button> -->
                    <input type="button" value="保存" class="btn btn-info pull-right" onclick = "submitUser();" />
                  </div>
                  <!-- /.box-footer -->
                </div>
              </form>
            </div>
          </div>
          <!-- /.modal-content -->
        </div>
      </div>
    </section>

{% endblock %}

{% block js %}
<!-- jQuery 3 -->
<script src="{% static 'bower_components/jquery/dist/jquery.min.js' %}"></script>
<!-- Bootstrap 3.3.7 -->
<script src="{% static 'bower_components/bootstrap/dist/js/bootstrap.min.js' %}"></script>
<script src="{% static 'bower_components/select2/dist/js/select2.full.min.js' %}"></script>

<!-- AdminLTE App -->
<script src="{% static 'dist/js/adminlte.min.js' %}"></script>
<script src="{% static 'dist/js/jquery.dataTables.min.js' %}"></script>
<script src="{% static 'dist/js/dataTables.bootstrap.min.js' %}"></script>
<script src="{% static 'dist/js/jquery.validate.js' %}"></script>
<script src="{% static 'dist/js/sweetalert.min.js' %}"></script>
<script src="{% static 'dist/js/account/user_manage.js' %}"></script>


<script>

</script>
{% endblock %}
